<template>
	<view style="padding: 30rpx;">
		<view class="box" style="display: flex; align-items: center; margin-bottom: 20rpx;">
			<image :src="user.avatar" style="width: 150rpx; border-radius: 50%;" mode="widthFix"></image>
			<view style="flex: 1; margin-left: 40rpx;">
				<view style="display: flex;">
					<view>
						<view style="margin-bottom: 10rpx; font-size: 32rpx;">{{ user.username }}</view>
						<view style="color: #888;">{{ user.name }}</view>
					</view>
					<view v-if="user.role === 'RIDER'" style="flex: 1; text-align: center; padding-top: 30rpx;">
						<view><uni-tag text="已认证骑手" type="warning"  :inverted="true" /></view>
					</view>
					<view v-else style="flex: 1; text-align: center; padding-top: 30rpx;">
						<view><uni-tag :text=user.message  type="warning"  :inverted="true" /></view>
					</view>
<!-- 					<view v-if="user.message" style="width: 70%;  padding-top: 30rpx; margin-left: 20rpx;">
						<view class="box" style="margin-left: 60rpx;">
							<view style="color: grey">{{ user.message }}</view>
						</view>
					</view> -->
				</view>
				
			</view>
		</view>

		<view class="box" style="margin-bottom: 20rpx; ">
			<view style="font-size: 36rpx; font-weight: bold;">我的功能</view>
			<view style="display: flex;margin-top: 20rpx;">
				<view class="me-items" @click="goToAddress()">
					<image src="@/static/icons/收货地址.png" style="width: 50%; height: 150rpx; padding-top: 5rpx;"
						mode="widthFix"></image>
					<view class="me-item-height">收货地址</view>
				</view>
				<view class="me-items" style="padding-top: 15rpx;" @click="goToCollect()">
					<image src="@/static/icons/我的收藏.png" style="width: 50%; height: 150rpx;" mode="widthFix"></image>
					<view class="me-item-height">我的收藏</view>
				</view>
				<view class="me-items" style="padding-top: 10rpx;" @click="goToCommentCenter()">
					<image src="@/static/icons/评价中心.png" style="width: 50%; height: 150rpx;" mode="widthFix"></image>
					<view class="me-item-height">评价中心</view>
				</view>
				<view class="me-items" style="padding-top: 5rpx;" @click="goToHistory()">
					<image src="@/static/icons/浏览历史.png" style="width: 50%; height: 150rpx;" mode="widthFix"></image>
					<view class="me-item-height">浏览历史</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view v-if="user.role === 'USER'">
				<uni-card>
					<view style="text-align: center;" @click="goToAuthentication()">
						<view >
							<view style="font-size: 60rpx; border: #888;color: black;padding-top: 20rpx;"><b>骑手认证</b></view>
							<view style="font-size: 30rpx;color: #888;margin-top: 25rpx;">(点击此处可认证骑手)</view>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="user.role === 'RIDER'">
				<uni-card >
					<view style="text-align: center;" @click="goToRiderCenter()">
						<view >
							<view style="font-size: 60rpx; border: #888;color: gold;padding-top: 20rpx;"><b>骑手中心</b></view>
							<view style="font-size: 30rpx;color: goldenrod;margin-top: 25rpx;">(点击此处可进入骑手中心)</view>
						</view>
					</view>
				</uni-card>
			</view>
		
			<view style="padding: 15rpx; border-bottom: 2rpx solid #eee;" @click="goToPerson()">
				<uni-icons type="person" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">
					个人信息
				</text>
				<uni-icons type="right" size="18" color="#999" style="float: right;"></uni-icons>
			</view>
			<view style="padding: 15rpx; border-bottom: 2rpx solid #eee;" @click="goToAboutUs()">
				<uni-icons type="help" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">
					关于我们
				</text>
				<uni-icons type="right" size="18" color="#999" style="float: right;"></uni-icons>
			</view>
			<view style="padding: 15rpx; border-bottom: 2rpx solid #eee;" @click="goToAgreement()">
				<uni-icons type="info" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">
					用户协议
				</text>
				<uni-icons type="right" size="18" color="#999" style="float: right;"></uni-icons>
			</view>
			<view style="padding: 15rpx; border-bottom: 2rpx solid #eee;" @click="logout()">
				<uni-icons type="undo" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">
					退出登录
				</text>
				<uni-icons type="right" size="18" color="#999" style="float: right;"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user')
			}
		},
		onShow() {
			this.user = uni.getStorageSync('xm-user')
			console.log(this.user.id)
		},
		methods: {
			goToRiderCenter(){
				uni.navigateTo({
					url:'/pages/riderCenter/riderCenter'
				})
			},
			goToAuthentication(){
				uni.navigateTo({
					url:"/pages/authentication/authentication"
				})
			},
			goToHistory(){
				uni.navigateTo({
					url:"/pages/history/history"
				})
			},
			goToPerson(){
				uni.navigateTo({
					url:"/pages/person/person"
				})
			},
			logout() {
				uni.removeStorageSync('xm-user')
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			goToAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			goToAboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs'
				})
			},
			goToAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			goToCollect() {
				uni.navigateTo({
					url: '/pages/collect/collect'
				})
			},
			goToCommentCenter() {
				uni.navigateTo({
					url: '/pages/commentCenter/commentCenter'
				})
			}
		}
	}
</script>

<style>
	.me-items {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-gap: 10rpx;
	}

	.me-item-height {
		padding-top: 5rpx;
		color: #666;
	}
</style>